<template>
  <container title="添加商品模型">

    <div class="main-card">
      <el-tabs v-model="tabName">
        <el-tab-pane name="base" label="模型信息">
          <div style="height: 10px"></div>
          <tbc-dynamic-form :form="dynamicForm" class="compact"/>
        </el-tab-pane>
        <el-tab-pane name="attribute" label="模型属性">
          <div style="height: 10px"></div>
          <tbc-dynamic-table
              :slots="['empty']"
              :data="attributeList"
              :cols="[
          {label: '属性名称', prop: 'attr_name', type: 'input', width: 120, class: 'border'},
          {label: '类型', prop: 'attr_type', width: 140},
          {label: '排序', prop: 'sort_val', type: 'input', width: 140, class:'border'},
          {label: '预设值(一行一个)', prop: 'options', minWidth: 200},
          {label: '输入方式', prop: 'input_type', width: 140},
          {label: '状态', prop: 'status', align: 'center', width: 140, type: 'switch'},
          {label: '操作', prop: 'action', type: 'action', width: 100, circle: true, fixed: 'right',
           click: onButtonClick,
           button: [
              {code: 'add', type: 'primary', icon: 'el-icon-plus'},
              {code: 'delete', type: 'danger', icon: 'el-icon-delete'}
          ]}]">
            <template #attr_type="scope">
              <el-select v-model="scope.row.attr_type" placeholder="请选择">
                <el-option
                    v-for="item in [{label: '基本属性', value: 1}, {label: '规格属性', value: 2}]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </template>
            <template #options="scope">
              <el-input v-model="scope.row.options" @click="showEditPanel(scope.index)" readonly>

              </el-input>
            </template>

            <template #input_type="scope">
              <el-select v-model="scope.row.input_type" placeholder="请选择">
                <el-option
                    v-for="item in [
                          {label: '单选框', value: 'radio'}, {label: '复选框', value: 'checkbox'},
                          {label: '下拉框', value: 'select'}, {label: '输入框', value: 'input'},
                          {label: '时间框', value: 'datetime'}, {label: '日期框', value: 'date'},
                      ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </template>
          </tbc-dynamic-table>
        </el-tab-pane>
      </el-tabs>

      <div style="margin-top: 20px">
        <el-button type="primary" @click="formSubmit">保存</el-button>
        <el-button onclick="history.back();">返回</el-button>
      </div>
    </div>

  </container>

  <tbc-dialog ref="editPanel" @confirm="$refs.editPanel.close()">
    <el-form>
      <el-form-item v-if="current > -1">
        <el-input type="textarea" rows="10" v-model="attributeList[current].options"></el-input>
      </el-form-item>
    </el-form>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, ref, onMounted, reactive, Ref, toRefs} from 'vue'
import useGoodsModel from './api/goodsModel'
import {useRoute} from "vue-router";

export default defineComponent({

  name: 'goods-model-form',

  setup() {

    const model = useGoodsModel()
    const route = useRoute()
    const editPanel: Ref = ref(null)
    const tabName: Ref<string> = ref('base')
    const state = reactive({
      current: -1,
      form: {model_id: route.query.id || '', attribute: ''},
      dynamicForm: [
        {label: '类型名称', value: '', field: 'model_name', type: 'input'},
        {label: '排序', value: 50, field: 'sort_weight', type: 'input-number'},
        {
          label: '状态', value: 1, field: 'status', type: 'radio',
          options: [
            {label: '使用', value: 1},
            {label: '禁用', value: 2}
          ]
        }
      ]
    })

    const attributeList: Ref<Record<string, number | string>[]> = ref([])
    const attributeItem = {
      attr_id: 0, attr_name: '', attr_type: 1, status: 1,
      input_type: '', options: '', sort_weight: 50, unit: '',
      is_list_show_attr: 0
    }

    const addAttributeItem = (): void => {
      attributeList.value.push({...attributeItem})
    }

    // 获取模型信息
    const getDetail = async () => {
      if (!state.form.model_id) return
      const res = await model.loadDataInfo(state.form.model_id as string)
      if (res.data.code !== 0) return
      const data = res.data.data
      for (let i in state.form) {
        if (data[i] !== undefined) state.form[i] = data[i]
      }
      state.dynamicForm.forEach((item) => {
        if (data[item.field] !== undefined) item.value = data[item.field]
      })
      attributeList.value = data.attribute
    }

    const onButtonClick = (data: Record<string, string>, code: string, index: number) => {
      if (code === 'add') return addAttributeItem()
      if (code === 'delete') {
        if (attributeList.value.length > 1)
          return attributeList.value.splice(index, 1)
      }
    }

    // 提交表单
    const formSubmit = async (): Promise<void> => {
      state.form.attribute = JSON.stringify(attributeList.value);
      state.dynamicForm.forEach((item: Record<string, any>) => (state.form as any)[item.field] = item.value)
      const res = await model.update(state.form as { [k: string]: string | number })
      if (res.data.code === 0) history.back()
    }

    const showEditPanel = (index: number) => {
      state.current = index
      editPanel.value.show()
    }

    onMounted(() => {
      getDetail()
      if (!attributeList.value.length) addAttributeItem()
    })

    return {
      ...toRefs(state),
      tabName,
      editPanel,
      showEditPanel,
      attributeList,
      addAttributeItem,
      onButtonClick,
      formSubmit
    }
  },
})
</script>